<template>
  <div class="attr-header">
    <div>
      <span>{{ deviceDetail.deviceName }}</span>
      <el-tag type="success" style="margin-left: 8px;" size="small">{{ deviceDetail.status === 'ONLINE' ? '在线' : '离线' }}</el-tag>
      <el-button type="info" link style="margin-left: 8px;" @click="changeDevice">切换</el-button>
      <span v-if="deviceDetail.msgTime" style="margin-left: 12px; font-size: 13px; color: #666;">{{ formatTime(deviceDetail.msgTime) }}</span>
    </div>
    <el-radio-group v-model="activateRadio">
      <el-radio-button :label="1">监控数据</el-radio-button>
      <el-radio-button :label="2">数据读写</el-radio-button>
      <el-radio-button :label="3">历史数据</el-radio-button>
      <el-radio-button :label="4">报警记录</el-radio-button>
    </el-radio-group>
  </div>
  <div v-if="activateRadio === 1 || activateRadio === 2" style="display: flex; margin-top: 16px; flex-wrap: wrap; justify-content: flex-start;">
    <AttrIndexCard v-for="(item, index) in deviceDetail.vacuumDeviceInfos" :activate-radio="activateRadio" :deviceId="currentDeviceId" :key="index" :attrIndex="item" style="margin-bottom: 12px;" :style="index%4 === 0 ? 'margin-left: 0' : 'margin-left: 16px'" />
  </div>
  <HistoryData v-if="activateRadio === 3" :deviceId="currentDeviceId" />
    <!-- 分页 -->
    <!-- <Pagination
      :total="page.total"
      v-model:page="page.pageNo"
      v-model:limit="page.pageSize"
      @pagination="getList"
    /> -->
  <RightSelectDevice ref="drawer" @change="deviceChange" />
  <AlarmsRecord v-if="activateRadio === 4" :deviceId="currentDeviceId" />
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import AttrIndexCard from './com/AttrIndexCard.vue';
import HistoryData from './com/HistoryData.vue';
import RightSelectDevice from './com/RightSelectDevice.vue';
import AlarmsRecord from './com/AlarmsRecord.vue';
import { getDeviceLatestMessageDetail } from '@/api/vs/vacuumdeviceattr/index'

// 当前激活的btn
const activateRadio = ref(1)

// 分页数据
// const page = ref({
//   pageNo: 1,
//   pageSize: 10,
//   total: 0,
// })

// 时间格式化
const formatTime = (val) => {
  return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
}

const route = useRoute()

// 设备详情数据
const deviceDetail = ref({
  deviceName: '',
  msgTime: '',
  status: '',
  vacuumDeviceInfos: []
})

// 获取设备详情
const getList = async() => {
  try {
    const res = await getDeviceLatestMessageDetail(currentDeviceId.value)
    console.log(res)
    deviceDetail.value = res
  } catch (error) {
    console.log(error)
  }
}

onMounted(() => {
  if(route.query.deviceId) {
    currentDeviceId.value = route.query.deviceId
    getList()
  }
})

const drawer = ref()
// 点击切换设备触发
const changeDevice = () => {
  drawer.value.openDrawer(currentDeviceId.value)
}


// 当前的设备id
const currentDeviceId = ref()
// 子组件抛出切换设备
const deviceChange = (id) => {
  currentDeviceId.value = id
  getList()
}
</script>

<style scoped lang="scss">
.attr-header {
  display: flex;
  padding: 12px;
  background-color: #fff;
  border-radius: 8px;
  align-items: center;
  justify-content: space-between;
}
</style>